<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wiki分类横幅</title>
</head>

<body>
    <div class="try-use common-footer-banner">
        <div class="try-use-content">
            <div class="try-use-intro">
                <div class="try-use-hint">开启高效研发之旅</div>
                <div class="try-use-title">立即免费试用，或直接与我们的解决方案专家沟通，了解和评估 ONES 如何帮助您的团队更进一步</div>
            </div>
            <div class="try-use-btn index-pc">
                <div class="apply-use-button"><span>免费试用</span>
                </div>
                <div class="contact-us-button">预约演示
                </div>
            </div>
            <div class="try-use-btn index-mobile">
                <div class="apply-use-button"><span>免费试用</span>
                </div>
                <div class="contact-us-button">预约演示
                </div>
            </div>
        </div>
    </div>
    <style>
        .try-use {
            position: relative;
            z-index: 0;
            height: 225px;
            background-image: linear-gradient(to right, #2e77e5, #004cbf 100%);
            overflow: hidden;
        }

        .try-use .try-use-content {
            width: 1000px;
            margin: auto;
            position: relative;
            z-index: 1;
            padding-top: 60px;
            height: 100%;
        }

        /*左边内容*/
        .try-use .try-use-content .try-use-intro {
            width: 600px;
            display: inline-block;
        }

        .try-use .try-use-content .try-use-hint {
            font-size: 32px;
            color: #fff;
            font-weight: 500;
        }

        .try-use .try-use-content .try-use-title {
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-top: 5px;
            line-height: 1.75;
            font-weight: 400;
        }

        /*PC端按钮*/
        .try-use .try-use-content .try-use-btn {
            text-align: center;
            position: absolute;
            right: 0;
            top: 40%;
        }

        .apply-use-button {
            vertical-align: top;
            display: inline-block;
            color: #fff;
            cursor: pointer;
            width: 140px;
            height: 44px;
            line-height: 44px;
            border-radius: 4px;
            box-shadow: 0 3px 5px 0 rgb(0 0 0 / 12%);
            background-image: linear-gradient(to right, #ff6a4c, #f24e24 100%);
            text-align: center;
        }

        .apply-use-button:hover {
            background: #ff6a4c;
        }

        .try-use .try-use-content .contact-us-button {
            cursor: pointer;
            vertical-align: top;
            display: inline-block;
            color: #0b5dd9;
            margin-left: 20px;
            background-color: #fff;
            width: 140px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            border-radius: 4px;
            box-shadow: 0 5px 10px 0 rgb(144 120 39 / 20%);
        }

        .try-use .try-use-content .contact-us-button:hover {
            background-color: #edeff2;
        }

        /*移动端*/

        @media screen and (max-width: 1200px) {

            .try-use {
                height: 214px;
            }

            .try-use .try-use-content {
                width: 800px;
            }

            .try-use .try-use-content .try-use-intro {
                width: 401px;
                margin-left: 30px;
            }

            .try-use .try-use-content .try-use-btn {
                right: 30px;
            }
        }

        @media screen and (max-width: 1024px) {

            .try-use {
                height: 214px;
            }

            .try-use .try-use-content {
                width: 800px;
            }

            .try-use .try-use-content .try-use-intro {
                width: 401px;
                margin-left: 30px;
            }

            .try-use .try-use-content .try-use-btn {
                right: 30px;
            }
        }

        @media screen and (max-width: 821px) {

            .try-use {
                height: 254px;
            }

            .try-use .try-use-content {
                width: 555px;
                padding-top: 50px;
                padding-left: 30px;
            }

            .try-use .try-use-content .try-use-intro {
                width: 495px;
                margin-left: 0;
            }

            .try-use .try-use-content .try-use-intro .try-use-hint {
                font-size: 24px;
            }

            .try-use .try-use-content .try-use-intro .try-use-title {
                font-size: 14px;
            }

            .try-use .try-use-content .try-use-btn {
                position: relative;
                margin-top: 20px;
                /*padding-left: 30px;*/
                /*修改*/
                top: auto;
            }

            .try-use .try-use-content .apply-use-button,
            .try-use .try-use-content .contact-us-button {
                width: 232px;
                height: 40px;
                line-height: 40px;
            }
        }

        @media screen and (max-width: 570px) {

            .try-use {
                height: 196px;
            }

            .try-use .try-use-content {
                width: 375px;
                padding-left: 20px;
            }

            .try-use .try-use-content .try-use-intro {
                width: 410px;
            }

            .try-use .try-use-content .try-use-intro .try-use-title {
                display: none;
            }

            .try-use .try-use-content .try-use-btn {
                padding-left: 20px;
                right: 26px;
                /*修改*/
            }

            .try-use .top-content-concat-button.try-use-button,
            .try-use .try-use-content .apply-use-button,
            .try-use .try-use-content .contact-us-button {
                width: 158px;
            }

            .try-use .try-use-content .contact-us-button {
                margin-left: 19px;
            }
        }

        /*控制按钮*/
        @media screen and (max-width: 1024px) {
            @media screen and (max-width: 821px) {
                .index-pc {
                    display: none !important;
                }
            }
        }

        @media screen and (max-width: 1024px) {
            .index-mobile {
                display: none !important;
            }
        }

        @media screen and (max-width: 1024px) {
            @media screen and (max-width: 821px) {
                .index-mobile {
                    display: block !important;
                }
            }
        }
    </style>
</body>

</html>